<template>
	<view class="content" v-if="isShow" @click.stop="isShow=false">
		<canvas @click.stop="" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" class="baa" canvas-id="my-canvas"></canvas>
		<view class="save-btn" @click.stop="saveImage">保存图片</view>
	</view>
</template>

<script>
	export default{
		props:{
			headerImg:{
				type: String,
				default: 'nbhjkhnbjkhn'
			},
			title:{
				type: String,
				default: '草莓千层蛋糕'
			},
			subTitle:{
				type: String,
				default: '鲜嫩多汁的草莓融合香甜奶油'
			},
			price:{
				type: String,
				default: 'hsj'
			},
			qrsize:{
				type: String,
				default: 'hsj'
			},
			abImg:{
				type: String,
				default: 'https://oss.zhangyubk.com/bottomab.png'
			},
			qrurl:{
				type: String,
				default: 'hsj'
			},
			gong:{
				type: String,
				default: 'hsj'
			},
			you:{
				type: String,
				default: 'hsj'
			},
			qrcode:{
				type: String,
				default: 'https://oss.zhangyubk.com/bottomab.png'
			},
			bgtu:{
				type: String,
				default: 'https://qiniuoss.yjqwl.cn/uploads/20211213/FqMjkHvBNI8Ko1w7bmTMY55ahITP.png'
			},
			dianhua:{
				type: String,
				default: 'https://qiniuoss.yjqwl.cn/uploads/20211216/FpnEbVeO-cqeiKixH2NID3wB3Wyh.png'
			},
			youxiang:{
				type: String,
				default: 'https://qiniuoss.yjqwl.cn/uploads/20211216/FgBzl-Oj2dWVE2fYBKETVWzhRGyM.png'
			},
			dizhi:{
				type: String,
				default: 'https://qiniuoss.yjqwl.cn/uploads/20211216/Fl7TAyZp1Kjfjnd7zLzl6QCytgPd.png'
			}
		},
		data(){
			return {
				canvasW: 0,
				canvasH: 0,
				ctx: null,
				isShow: false,
				// qrcode: 'https://gd.huijipin.cn/qrcode.jpg'
			}
		},
		methods:{
			//显示
			showCanvas(){
				this.isShow = true
				let that=this
				uni.getSystemInfo({
					success: function (res) {
						console.log(res.model);
						console.log(res.pixelRatio);
						console.log(res.windowWidth);
						console.log(res.windowHeight);
						console.log(res.language);
						console.log(res.version);
						console.log(res.platform);
						if(res.windowWidth>=375){
							that.__init()
						}else{
							that.__init1()
						}
					}
				});

			},
			//初始化画布
			async __init1(){
				uni.showLoading({
				    title: '',
					mask: true
				})
				this.ctx = uni.createCanvasContext('my-canvas',this)


				this.canvasW = uni.upx2px(690);
				this.canvasH = uni.upx2px(410);
				//设置画布背景透明
				// this.ctx.setFillStyle('#000000')
				//设置画布大小
				this.ctx.fillRect(0,0,this.canvasW,this.canvasH)
				//绘制圆角背景
				// this.drawRoundRect(this.ctx, 0, 0, this.canvasW, this.canvasH,20)

				// 获取背景图片
				let bgtu = await this.getImageInfo(this.bgtu)
				let hW1 = uni.upx2px(690);
				let hH1 = uni.upx2px(410);
				this.drawRoundImg(this.ctx,bgtu.path,0,0,hW1,hH1,0)
				// this.ctx.drawImage(bgtu.path,0,0,hW1,hH1)
				//获取标题图片
				let headerImg = await this.getImageInfo(this.headerImg)
				let hW = uni.upx2px(80);
				let hH = uni.upx2px(80);
				// this.ctx.lineJoin="round"
				// this.ctx.fillStyle = '#ffffff'
				// this.ctx.fillRect(10, 20, 255, 130);
				// this.drawRoundRect(this.ctx, 10, (this.canvasW)/5-30, this.canvasW-20, (this.canvasH)/3,uni.upx2px(30),'#F8F8F8')
				// this.ctx.clearRect(20, 20, 300, 200);
				// this.ctx.strokeRect(50, 50, 50, 50);
				//绘制标题图
				this.drawRoundImg(this.ctx,headerImg.path,(this.canvasW) /16-6,(this.canvasH) /4,hW,hH,20)
				//绘制标题
				this.ctx.setFontSize(12); //设置标题字体大小
				this.ctx.setFillStyle('#ffffff'); //设置标题文本颜色
				let sWidth1= this.ctx.measureText(this.subTitle).width
				if(this.title.length>3){
					this.ctx.fillText(this.title.slice(0,3) + '...',(this.canvasW) /16-6,(this.canvasH) /4+70)
				}else{
					this.ctx.fillText(this.title,(this.canvasW) /16-6,(this.canvasH) /4+70)
				}
				// this.ctx.fillText(this.title,(this.canvasW) /16+6,(this.canvasH) /4+60)
				//绘制副标题
				this.ctx.setFontSize(10);
				this.ctx.setFillStyle('#cccccc');
				let sWidth = this.ctx.measureText(this.subTitle).width
				if(this.subTitle.length>4){
					// this.drawtext1(this.ctx,this.subTitle,(this.canvasW) /16-6,(this.canvasH) /4+80,this.canvasW-290)
					this.ctx.fillText(this.subTitle.slice(0,4) + '...',(this.canvasW) /16-6,(this.canvasH) /4+90)
				}else{
					this.ctx.fillText(this.subTitle,(this.canvasW) /16-6,(this.canvasH) /4+90)
				}
				//绘制价格
				// this.ctx.setFontSize(6);
				// this.ctx.setFillStyle('#858585');
				// this.ctx.fillText(((this.canvasW-hW) / 2-90),(
				// ((this.canvasW-hW) / 2) + hH - 50))
				// this.ctx.setFontSize(12);
				// this.ctx.fillText(this.price,(((this.canvasW-hW) / 2-90) ),(
				// ((this.canvasW-hW) / 2) + hH - 70))
				// this.ctx.setFontSize(16);
				// this.ctx.setFillStyle('#ffffff');
				// let str=this.gong
				//     let canvasWidth = 180;//计算canvas的宽度
				//     let initHeight=(this.canvasH) / 3;//绘制的文字距离canvas顶部初始的高度
				//     let lineWidth = 0;
				//     let StrIndex= 0; //每次开始截取的字符串的索引
				//     for(let i=0;i<str.length;i++) {
				//       lineWidth += this.ctx.measureText(str[i]).width;
				//       if (lineWidth > canvasWidth) {
				//         this.ctx.fillText(str.substring(StrIndex, i), (this.canvasW)/2-90, initHeight);//绘制截取部分
				//         initHeight += 20;//这里22为字体的高度
				//         lineWidth = 0;
				//         StrIndex = i;
				//       }
				//       if (i == str.length - 1) {//绘制剩余部分
				//         this.ctx.fillText(str.substring(StrIndex, i + 1), (this.canvasW)/2-90, initHeight);
				//       }
				//     }


				if(this.gong.length<16){
					this.ctx.setFontSize(12);
					this.ctx.setFillStyle('#ffffff');
					// this.ctx.fillText(this.fittingString( this.ctx,this.gong,230),(this.canvasW)/2-90,(this.canvasH) / 3)
					let gong=this.gong
					// if(gong.length>20){
					// 	gong=gong+'...'
					// }
					 this.drawtext(this.ctx,gong,(this.canvasW)/2-80,(this.canvasH) / 5,this.canvasW-120)

					// 电话
					let dianhua = await this.getImageInfo(this.dianhua)
					let d_hW = uni.upx2px(20);
					let d_hH = uni.upx2px(20);
					this.drawRoundImg(this.ctx,dianhua.path,(this.canvasW)/2-80,(this.canvasH) / 3+10,d_hW,d_hH,0)
					this.ctx.setFontSize(10);
					this.ctx.setFillStyle('rgba(255,255,255,.5)');
					if(this.price==''){
						this.price='待完善'
					}
					this.ctx.fillText(this.fittingString( this.ctx,this.price,150),(this.canvasW)/2-66,(this.canvasH) / 3+20)

					// 邮箱
					let youxiang = await this.getImageInfo(this.youxiang)
					let y_hW = uni.upx2px(20);
					let y_hH = uni.upx2px(20);
					this.drawRoundImg(this.ctx,youxiang.path,(this.canvasW)/2-80,(this.canvasH) / 3+30,y_hW,y_hH,0)
					this.ctx.setFontSize(10);
					this.ctx.setFillStyle('rgba(255,255,255,.5)');
					if(this.you==''){
						this.you='待完善'
					}
					this.ctx.fillText(this.fittingString( this.ctx,this.you,150),(this.canvasW)/2-66,(this.canvasH) / 3+40)

					// 地址
					let dizhi = await this.getImageInfo(this.dizhi)
					let z_hW = uni.upx2px(20);
					let z_hH = uni.upx2px(20);
					this.drawRoundImg(this.ctx,dizhi.path,(this.canvasW)/2-80,(this.canvasH) / 3+50,z_hW,z_hH,0)
					this.ctx.setFontSize(10);
					this.ctx.setFillStyle('rgba(255,255,255,.5)');
					let dd=this.qrsize
					if(dd.length>25){
						dd=dd+'...'
					}
					if(dd==''){
						dd='待完善'
					}
					// this.ctx.fillText(this.fittingString( this.ctx,this.price,150),(this.canvasW)/2-70,(this.canvasH) / 3+52)
					 this.drawtext(this.ctx,dd,(this.canvasW)/2-76,(this.canvasH) / 3+40,this.canvasW-180)
				}else{
					this.ctx.setFontSize(12);
					this.ctx.setFillStyle('#ffffff');
					// this.ctx.fillText(this.fittingString( this.ctx,this.gong,230),(this.canvasW)/2-90,(this.canvasH) / 3)
					let gong=this.gong
					if(gong.length>25){
						gong=gong.slice(0,25)
						gong=gong+'...'
					}
					 this.drawtext(this.ctx,gong,(this.canvasW)/2-80,(this.canvasH) / 5,this.canvasW-120)

					// 电话
					let dianhua = await this.getImageInfo(this.dianhua)
					let d_hW = uni.upx2px(20);
					let d_hH = uni.upx2px(20);
					this.drawRoundImg(this.ctx,dianhua.path,(this.canvasW)/2-80,(this.canvasH) / 3+30,d_hW,d_hH,0)
					this.ctx.setFontSize(10);
					this.ctx.setFillStyle('rgba(255,255,255,.5)');
					if(this.price==''){
						this.price='待完善'
					}
					this.ctx.fillText(this.fittingString( this.ctx,this.price,150),(this.canvasW)/2-66,(this.canvasH) / 3+40)

					// 邮箱
					let youxiang = await this.getImageInfo(this.youxiang)
					let y_hW = uni.upx2px(20);
					let y_hH = uni.upx2px(20);
					this.drawRoundImg(this.ctx,youxiang.path,(this.canvasW)/2-80,(this.canvasH) / 3+50,y_hW,y_hH,0)
					this.ctx.setFontSize(10);
					this.ctx.setFillStyle('rgba(255,255,255,.5)');
					if(this.you==''){
						this.you='待完善'
					}
					this.ctx.fillText(this.fittingString( this.ctx,this.you,150),(this.canvasW)/2-66,(this.canvasH) / 3+60)

					// 地址
					let dizhi = await this.getImageInfo(this.dizhi)
					let z_hW = uni.upx2px(20);
					let z_hH = uni.upx2px(20);
					this.drawRoundImg(this.ctx,dizhi.path,(this.canvasW)/2-80,(this.canvasH) / 3+70,z_hW,z_hH,0)
					this.ctx.setFontSize(10);
					this.ctx.setFillStyle('rgba(255,255,255,.5)');
					let dd=this.qrsize
					if(dd.length>20){
						dd=dd.slice(0,20)
						dd=dd+'...'
					}
					if(dd==''){
						dd='待完善'
					}
					// this.ctx.fillText(this.fittingString( this.ctx,this.price,150),(this.canvasW)/2-70,(this.canvasH) / 3+52)
					 this.drawtext(this.ctx,dd,(this.canvasW)/2-66,(this.canvasH) / 3+60,this.canvasW-180)
				}


				// this.ctx.setFontSize(12);
				// this.ctx.fillText(this.fittingString( this.ctx,'地址：'+this.qrsize,230),(((this.canvasW-hW) / 2-90) ),(
				// ((this.canvasW-hW) / 2) + hH - 30))




				// this.ctx.setFontSize(18);
				// this.ctx.setFillStyle('#000000');
				// this.ctx.font = 'normal bold 18px Arial,sans-serif ';
				// this.ctx.fillText('您好,',(((this.canvasW-hW) / 2-90) ),(
				// ((this.canvasW-hW) / 2) + hH +40))

				// this.ctx.setFontSize(18);
				// this.ctx.setFillStyle('#000000');
				// this.ctx.font = 'normal bold 18px Arial,sans-serif ';
				// this.ctx.fillText(this.qrurl,(((this.canvasW-hW) / 2-90) ),(
				// ((this.canvasW-hW) / 2) + hH +70))

				// this.ctx.setFontSize(18);
				// this.ctx.setFillStyle('#000000');
				// this.ctx.font = 'normal bold 18px Arial,sans-serif ';
				// this.ctx.fillText('请惠存,谢谢。',(((this.canvasW-hW) / 2-90) ),(
				// ((this.canvasW-hW) / 2) + hH +100))
				//绘制虚线
				// this.drawDashLine(this.ctx,10,(((this.canvasW-hW) / 2) + hH + 120),(this.canvasW-10),(((this.canvasW-hW) / 2) + hH + 120),5)
				//左边实心圆
				// this.drawEmptyRound(this.ctx,0,(((this.canvasW-hW) / 2) + hH + 120),10)
				//右边实心圆
				// this.drawEmptyRound(this.ctx,this.canvasW,(((this.canvasW-hW) / 2) + hH + 120),10)
				//提示文案
				// this.ctx.setFontSize(12);
				// this.ctx.setFillStyle('#000000');
				// this.ctx.fillText('长按识别图中小程序码',(this.canvasW)/2-120,(((this.canvasW-hW) / 2) + hH + 170))
				// this.ctx.setFontSize(12);
				// this.ctx.setFillStyle('#858585');
				// this.ctx.fillText('名片由「冻品信息汇」小程序提供',(this.canvasW)/2-120,(((this.canvasW-hW) / 2) + hH + 190))
				//底部广告
				// let BottomAdImg = await this.getImageInfo(this.abImg)
				// this.ctx.drawImage(BottomAdImg.path,15,(((this.canvasW-hW) / 2) + hH + 160),175,55)
				//小程序码
				let qrcodeImg = await this.getImageInfo(this.qrcode)
				// this.ctx.drawImage(qrcodeImg.path,(this.canvasW)/2-90,(this.canvasH) / 3+30,60, 60)
				this.drawRoundImg(this.ctx,qrcodeImg.path,(this.canvasW)/2+84,(this.canvasH) / 3+30,54,54,27)


				this.ctx.setFontSize(10);
				this.ctx.setFillStyle('rgba(255,255,255,.5)');
				this.ctx.fillText('扫码了解更多',(this.canvasW)/2+80,(this.canvasH) / 3+100)
				//延迟渲染
				setTimeout(()=>{
					this.ctx.draw(true,()=>{
						uni.hideLoading()
					})
				},500)
			},
			//初始化画布
			async __init(){
				uni.showLoading({
				    title: '',
					mask: true
				})
				this.ctx = uni.createCanvasContext('my-canvas',this)


				this.canvasW = uni.upx2px(690);
				this.canvasH = uni.upx2px(410);
				//设置画布背景透明
				// this.ctx.setFillStyle('#000000')
				//设置画布大小
				this.ctx.fillRect(0,0,this.canvasW,this.canvasH)
				//绘制圆角背景
				// this.drawRoundRect(this.ctx, 0, 0, this.canvasW, this.canvasH,20)

				// 获取背景图片
				let bgtu = await this.getImageInfo(this.bgtu)
				let hW1 = uni.upx2px(690);
				let hH1 = uni.upx2px(410);
				this.drawRoundImg(this.ctx,bgtu.path,0,0,hW1,hH1,0)
				// this.ctx.drawImage(bgtu.path,0,0,hW1,hH1)
				//获取标题图片
				let headerImg = await this.getImageInfo(this.headerImg)
				let hW = uni.upx2px(80);
				let hH = uni.upx2px(80);
				// this.ctx.lineJoin="round"
				// this.ctx.fillStyle = '#ffffff'
				// this.ctx.fillRect(10, 20, 255, 130);
				// this.drawRoundRect(this.ctx, 10, (this.canvasW)/5-30, this.canvasW-20, (this.canvasH)/3,uni.upx2px(30),'#F8F8F8')
				// this.ctx.clearRect(20, 20, 300, 200);
				// this.ctx.strokeRect(50, 50, 50, 50);
				//绘制标题图
				this.drawRoundImg(this.ctx,headerImg.path,(this.canvasW) /16-6,(this.canvasH) /4,hW,hH,20)
				//绘制标题
				this.ctx.setFontSize(14); //设置标题字体大小
				this.ctx.setFillStyle('#ffffff'); //设置标题文本颜色
				let sWidth1= this.ctx.measureText(this.subTitle).width
				if(this.title.length>3){
					this.ctx.fillText(this.title.slice(0,3) + '...',(this.canvasW) /16-6,(this.canvasH) /4+70)
				}else{
					this.ctx.fillText(this.title,(this.canvasW) /16-6,(this.canvasH) /4+70)
				}
				// this.ctx.fillText(this.title,(this.canvasW) /16+6,(this.canvasH) /4+60)
				//绘制副标题
				this.ctx.setFontSize(12);
				this.ctx.setFillStyle('#cccccc');
				let sWidth = this.ctx.measureText(this.subTitle).width
				if(this.subTitle.length>4){
					// this.drawtext1(this.ctx,this.subTitle,(this.canvasW) /16-6,(this.canvasH) /4+80,this.canvasW-290)
					this.ctx.fillText(this.subTitle.slice(0,4) + '...',(this.canvasW) /16-6,(this.canvasH) /4+90)
				}else{
					this.ctx.fillText(this.subTitle,(this.canvasW) /16-6,(this.canvasH) /4+90)
				}
				//绘制价格
				// this.ctx.setFontSize(6);
				// this.ctx.setFillStyle('#858585');
				// this.ctx.fillText(((this.canvasW-hW) / 2-90),(
				// ((this.canvasW-hW) / 2) + hH - 50))
				// this.ctx.setFontSize(12);
				// this.ctx.fillText(this.price,(((this.canvasW-hW) / 2-90) ),(
				// ((this.canvasW-hW) / 2) + hH - 70))
				// this.ctx.setFontSize(16);
				// this.ctx.setFillStyle('#ffffff');
				// let str=this.gong
				//     let canvasWidth = 180;//计算canvas的宽度
				//     let initHeight=(this.canvasH) / 3;//绘制的文字距离canvas顶部初始的高度
				//     let lineWidth = 0;
				//     let StrIndex= 0; //每次开始截取的字符串的索引
				//     for(let i=0;i<str.length;i++) {
				//       lineWidth += this.ctx.measureText(str[i]).width;
				//       if (lineWidth > canvasWidth) {
				//         this.ctx.fillText(str.substring(StrIndex, i), (this.canvasW)/2-90, initHeight);//绘制截取部分
				//         initHeight += 20;//这里22为字体的高度
				//         lineWidth = 0;
				//         StrIndex = i;
				//       }
				//       if (i == str.length - 1) {//绘制剩余部分
				//         this.ctx.fillText(str.substring(StrIndex, i + 1), (this.canvasW)/2-90, initHeight);
				//       }
				//     }


				if(this.gong.length<16){
					this.ctx.setFontSize(16);
					this.ctx.setFillStyle('#ffffff');
					// this.ctx.fillText(this.fittingString( this.ctx,this.gong,230),(this.canvasW)/2-90,(this.canvasH) / 3)
					let gong=this.gong
					// if(gong.length>20){
					// 	gong=gong+'...'
					// }
					 this.drawtext(this.ctx,gong,(this.canvasW)/2-90,(this.canvasH) / 5,this.canvasW-120)

					// 电话
					let dianhua = await this.getImageInfo(this.dianhua)
					let d_hW = uni.upx2px(20);
					let d_hH = uni.upx2px(20);
					this.drawRoundImg(this.ctx,dianhua.path,(this.canvasW)/2-90,(this.canvasH) / 3+10,d_hW,d_hH,0)
					this.ctx.setFontSize(12);
					this.ctx.setFillStyle('rgba(255,255,255,.5)');
					if(this.price==''){
						this.price='待完善'
					}
					this.ctx.fillText(this.fittingString( this.ctx,this.price,150),(this.canvasW)/2-76,(this.canvasH) / 3+20)

					// 邮箱
					let youxiang = await this.getImageInfo(this.youxiang)
					let y_hW = uni.upx2px(20);
					let y_hH = uni.upx2px(20);
					this.drawRoundImg(this.ctx,youxiang.path,(this.canvasW)/2-90,(this.canvasH) / 3+30,y_hW,y_hH,0)
					this.ctx.setFontSize(12);
					this.ctx.setFillStyle('rgba(255,255,255,.5)');
					if(this.you==''){
						this.you='待完善'
					}
					this.ctx.fillText(this.fittingString( this.ctx,this.you,150),(this.canvasW)/2-76,(this.canvasH) / 3+40)

					// 地址
					let dizhi = await this.getImageInfo(this.dizhi)
					let z_hW = uni.upx2px(20);
					let z_hH = uni.upx2px(20);
					this.drawRoundImg(this.ctx,dizhi.path,(this.canvasW)/2-90,(this.canvasH) / 3+50,z_hW,z_hH,0)
					this.ctx.setFontSize(12);
					this.ctx.setFillStyle('rgba(255,255,255,.5)');
					let dd=this.qrsize
					if(dd.length>25){
						dd=dd+'...'
					}
					if(dd==''){
						dd='待完善'
					}
					// this.ctx.fillText(this.fittingString( this.ctx,this.price,150),(this.canvasW)/2-70,(this.canvasH) / 3+52)
					 this.drawtext(this.ctx,dd,(this.canvasW)/2-76,(this.canvasH) / 3+40,this.canvasW-210)
				}else{
					this.ctx.setFontSize(14);
					this.ctx.setFillStyle('#ffffff');
					// this.ctx.fillText(this.fittingString( this.ctx,this.gong,230),(this.canvasW)/2-90,(this.canvasH) / 3)
					let gong=this.gong
					if(gong.length>25){
						gong=gong.slice(0,25)
						gong=gong+'...'
					}
					 this.drawtext(this.ctx,gong,(this.canvasW)/2-90,(this.canvasH) / 5,this.canvasW-120)

					// 电话
					let dianhua = await this.getImageInfo(this.dianhua)
					let d_hW = uni.upx2px(20);
					let d_hH = uni.upx2px(20);
					this.drawRoundImg(this.ctx,dianhua.path,(this.canvasW)/2-90,(this.canvasH) / 3+30,d_hW,d_hH,0)
					this.ctx.setFontSize(12);
					this.ctx.setFillStyle('rgba(255,255,255,.5)');
					if(this.price==''){
						this.price='待完善'
					}
					this.ctx.fillText(this.fittingString( this.ctx,this.price,150),(this.canvasW)/2-76,(this.canvasH) / 3+40)

					// 邮箱
					let youxiang = await this.getImageInfo(this.youxiang)
					let y_hW = uni.upx2px(20);
					let y_hH = uni.upx2px(20);
					this.drawRoundImg(this.ctx,youxiang.path,(this.canvasW)/2-90,(this.canvasH) / 3+50,y_hW,y_hH,0)
					this.ctx.setFontSize(12);
					this.ctx.setFillStyle('rgba(255,255,255,.5)');
					if(this.you==''){
						this.you='待完善'
					}
					this.ctx.fillText(this.fittingString( this.ctx,this.you,150),(this.canvasW)/2-76,(this.canvasH) / 3+60)

					// 地址
					let dizhi = await this.getImageInfo(this.dizhi)
					let z_hW = uni.upx2px(20);
					let z_hH = uni.upx2px(20);
					this.drawRoundImg(this.ctx,dizhi.path,(this.canvasW)/2-90,(this.canvasH) / 3+70,z_hW,z_hH,0)
					this.ctx.setFontSize(12);
					this.ctx.setFillStyle('rgba(255,255,255,.5)');
					let dd=this.qrsize
					if(dd.length>20){
						dd=dd.slice(0,20)
						dd=dd+'...'
					}
					if(dd==''){
						dd='待完善'
					}
					// this.ctx.fillText(this.fittingString( this.ctx,this.price,150),(this.canvasW)/2-70,(this.canvasH) / 3+52)
					 this.drawtext(this.ctx,dd,(this.canvasW)/2-76,(this.canvasH) / 3+60,this.canvasW-210)
				}


				// this.ctx.setFontSize(12);
				// this.ctx.fillText(this.fittingString( this.ctx,'地址：'+this.qrsize,230),(((this.canvasW-hW) / 2-90) ),(
				// ((this.canvasW-hW) / 2) + hH - 30))




				// this.ctx.setFontSize(18);
				// this.ctx.setFillStyle('#000000');
				// this.ctx.font = 'normal bold 18px Arial,sans-serif ';
				// this.ctx.fillText('您好,',(((this.canvasW-hW) / 2-90) ),(
				// ((this.canvasW-hW) / 2) + hH +40))

				// this.ctx.setFontSize(18);
				// this.ctx.setFillStyle('#000000');
				// this.ctx.font = 'normal bold 18px Arial,sans-serif ';
				// this.ctx.fillText(this.qrurl,(((this.canvasW-hW) / 2-90) ),(
				// ((this.canvasW-hW) / 2) + hH +70))

				// this.ctx.setFontSize(18);
				// this.ctx.setFillStyle('#000000');
				// this.ctx.font = 'normal bold 18px Arial,sans-serif ';
				// this.ctx.fillText('请惠存,谢谢。',(((this.canvasW-hW) / 2-90) ),(
				// ((this.canvasW-hW) / 2) + hH +100))
				//绘制虚线
				// this.drawDashLine(this.ctx,10,(((this.canvasW-hW) / 2) + hH + 120),(this.canvasW-10),(((this.canvasW-hW) / 2) + hH + 120),5)
				//左边实心圆
				// this.drawEmptyRound(this.ctx,0,(((this.canvasW-hW) / 2) + hH + 120),10)
				//右边实心圆
				// this.drawEmptyRound(this.ctx,this.canvasW,(((this.canvasW-hW) / 2) + hH + 120),10)
				//提示文案
				// this.ctx.setFontSize(12);
				// this.ctx.setFillStyle('#000000');
				// this.ctx.fillText('长按识别图中小程序码',(this.canvasW)/2-120,(((this.canvasW-hW) / 2) + hH + 170))
				// this.ctx.setFontSize(12);
				// this.ctx.setFillStyle('#858585');
				// this.ctx.fillText('名片由「冻品信息汇」小程序提供',(this.canvasW)/2-120,(((this.canvasW-hW) / 2) + hH + 190))
				//底部广告
				// let BottomAdImg = await this.getImageInfo(this.abImg)
				// this.ctx.drawImage(BottomAdImg.path,15,(((this.canvasW-hW) / 2) + hH + 160),175,55)
				//小程序码
				let qrcodeImg = await this.getImageInfo(this.qrcode)
				// this.ctx.drawImage(qrcodeImg.path,(this.canvasW)/2-90,(this.canvasH) / 3+30,60, 60)
				this.drawRoundImg(this.ctx,qrcodeImg.path,(this.canvasW)/2+110,(this.canvasH) / 3+60,54,54,27)


				this.ctx.setFontSize(10);
				this.ctx.setFillStyle('rgba(255,255,255,.5)');
				this.ctx.fillText('扫码了解更多',(this.canvasW)/2+106,(this.canvasH) / 3+130)
				//延迟渲染
				setTimeout(()=>{
					this.ctx.draw(true,()=>{
						uni.hideLoading()
					})
				},500)
			},

			// 文字换行
			drawtext(ctx,t,x,y,w){
			    //参数说明
			    //ctx：canvas的 2d 对象，t：绘制的文字，x,y:文字坐标，w：文字最大宽度
			    let chr = t.split("")
			    let temp = ""
			    let row = []

			    for (let a = 0; a<chr.length;a++){
			        if( ctx.measureText(temp).width < w && ctx.measureText(temp+(chr[a])).width <= w){
			            temp += chr[a];
			        }else{
			            row.push(temp);
			            temp = chr[a];
			        }
			    }
			    row.push(temp)
			    for(let b=0;b<row.length;b++){
			        ctx.fillText(row[b],x,y+(b+1)*20);//每行字体y坐标间隔20
			    }

			},
			// 文字换行
			drawtext1(ctx,t,x,y,w){
			    //参数说明
			    //ctx：canvas的 2d 对象，t：绘制的文字，x,y:文字坐标，w：文字最大宽度
			    let chr = t.split("")
			    let temp = ""
			    let row = []

			    for (let a = 0; a<chr.length;a++){
			        if( ctx.measureText(temp).width < w && ctx.measureText(temp+(chr[a])).width <= w){
			            temp += chr[a];
			        }else{
			            row.push(temp);
			            temp = chr[a];
			        }
			    }
			    row.push(temp)
			    for(let b=0;b<row.length;b++){
			        ctx.fillText(row[b],x,y+(b+1)*16);//每行字体y坐标间隔20
			    }

			},

			fittingString(_ctx, str, maxWidth) {
			   let strWidth = _ctx.measureText(str).width;
			   const ellipsis = "…";
			   const ellipsisWidth = _ctx.measureText(ellipsis).width;
			   if (strWidth <= maxWidth || maxWidth <= ellipsisWidth) {
			     return str;
			   } else {
			     var len = str.length;
			     while (strWidth >= maxWidth - ellipsisWidth && len-- > 0) {
			       str = str.slice(0, len);
			       strWidth = _ctx.measureText(str).width;
			     }
			     return str + ellipsis;
			   }
			 },
			//绘制实心圆
			drawEmptyRound(ctx,x,y,radius){
				ctx.save()
				ctx.beginPath();
				ctx.arc(x, y, radius, 0, 2 * Math.PI,true);
				ctx.setFillStyle('rgba(0, 0, 0, .4)')
				ctx.fill();
				ctx.restore()
				ctx.closePath()
			},
			//绘制虚线
			drawDashLine(ctx,x1,y1,x2,y2,dashLength){
				ctx.setStrokeStyle("#cccccc")//设置线条的颜色
				ctx.setLineWidth(1)//设置线条宽度
				var dashLen = dashLength,
				xpos = x2 - x1, //得到横向的宽度;
				ypos = y2 - y1, //得到纵向的高度;
				numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen);
				//利用正切获取斜边的长度除以虚线长度，得到要分为多少段;
				for(var i=0; i<numDashes; i++){
				 if(i % 2 === 0){
					 ctx.moveTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i);
					 //有了横向宽度和多少段，得出每一段是多长，起点 + 每段长度 * i = 要绘制的起点；
				  }else{
					  ctx.lineTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i);
				  }
				}
				ctx.stroke();
			},
			//带圆角图片
			drawRoundImg(ctx, img, x, y, width, height, radius){
				ctx.beginPath()
				ctx.save()
				// 左上角
				ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5)
				// 右上角
				ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2)
				// 右下角
				ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5)
				// 左下角
				ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI)
				ctx.stroke()
				ctx.clip()
				ctx.drawImage(img, x, y, width, height);
				ctx.restore()
				ctx.closePath()
			},
			//圆角矩形
			drawRoundRect(ctx, x, y, width, height, radius){
				ctx.save();
				ctx.beginPath();
				// ctx.setFillStyle(color);
				// ctx.setStrokeStyle(color)
				ctx.setLineJoin('round');  //交点设置成圆角
				ctx.setLineWidth(radius);
				ctx.strokeRect(x + radius/2, y + radius/2, width - radius , height - radius );
				ctx.fillRect(x + radius, y + radius, width - radius * 2, height - radius * 2);
				ctx.stroke();
				ctx.closePath();
			},
			//获取图片
			getImageInfo(imgSrc){
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: imgSrc,
						success: (image) => {
							resolve(image);
							console.log('获取图片成功',image)
						},
						fail: (err) => {
							reject(err);
							console.log('获取图片失败',err)
						}
					});
				});
			},
			//保存图片到相册
			saveImage(){
				//判断用户授权
				// uni.getSetting({
				//    success(res) {
				//       console.log('获取用户权限',res.authSetting)
				// 	  if(Object.keys(res.authSetting).length>0){
				// 		  //判断是否有相册权限
				// 		  if(res.authSetting['scope.writePhotosAlbum']==undefined){
				// 			  //打开设置权限
				// 			  uni.openSetting({
				// 			    success(res) {
				// 			      console.log('设置权限',res.authSetting)
				// 			    }
				// 			  })
				// 		  }else{
				// 			  if(!res.authSetting['scope.writePhotosAlbum']){
				// 				  //打开设置权限
				// 				  uni.openSetting({
				// 				    success(res) {
				// 				      console.log('设置权限',res.authSetting)
				// 				    }
				// 				  })
				// 			  }
				// 		  }
				// 	  }else{
				// 		  return
				// 	  }
				//    }
				// })
				var that = this
				uni.canvasToTempFilePath({
					canvasId: 'my-canvas',
					quality: 1,
					complete: (res) => {
						console.log('保存到相册',res);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已保存到相册',
									icon: 'success',
									duration: 2000
								})
								setTimeout(()=>{
									that.isShow = false
								},2000)
							}
						})
					}
				},this);
			}
		}
	}
</script>

<style scoped lang="scss">
.content{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,.4);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.save-btn{
		margin-top: 35rpx;
		color: #FFFFFF;
		background: linear-gradient(to right, #FE726B , #FE956B);
		padding: 15rpx 40rpx;
		border-radius: 50rpx;
	}
}
.baa{
	// border-radius: 20rpx;
	// overflow: hidden;
}
</style>
